tag is returned as JavaScript function to the render function
...
Component {
render()
{
return(

{'Welcome to React
world!'}

)
} }
� Back to Top
4
...
Elements can
11

contain other Elements in their props
...

Once an element is created, it is never mutated
...
createElement(
'div',
{id: 'login-btn'},
'Login'
)
The above React
...
render():

Login

Whereas a component can be declared in several different ways
...

In either case, it takes props as an input, and returns a JSX tree as the
output:
const Button = ({ onLogin }) =>

Login

Then JSX gets transpiled to a React
...
createElement(
'div',
{ id: 'login-btn', onClick: onLogin },
'Login'
)
� Back to Top
5
...

1
...
Those are pure JavaScript functions that accept props object
as the first parameter and return React elements:

12

“jsx harmony function Greeting({ message }) {

{Hello, ${message}‘}

return

} “‘
2
...
The above function component can be written as:
jsx harmony
render() {
} }

class Greeting extends React
...
props
...

When to use a Class Component over a Function Component?
If the component needs state or lifecycle methods then use class component otherwise use function component
...
8 with
the addition of Hooks, you could use state , lifecycle methods and other
features that were only available in class component right in your function
component
...

What are Pure Components?
React
...
Component except
that it handles the shouldComponentUpdate() method for you
...
Component on the other hand won’t compare current props and state to next out of the box
...

� Back to Top
8
...
We should always try to make
our state as simple as possible and minimize the number of stateful components
...
Component { constructor(props)
{ super(props)
this
...
state
...
e
...

� Back to Top
9
...
They are single values or objects containing a set of values that are passed to components on creation using a
naming convention similar to HTML-tag attributes
...


14

The primary purpose of props in React is to provide following component
functionality:
1
...

2
...

3
...
props
...

For example, let us create an element with reactProp property:
jsx harmony



This reactProp (or whatever you came up with) name then becomes a
property attached to React’s native props object which originally already
exists on all components created using React library
...
reactProp
� Back to Top
10
...
While both of them
hold information that influences the output of render, they are different
in their functionality with respect to component
...

� Back to Top
11
...

//Wrong
this
...
message = 'Hello world'
Instead use setState() method
...
When state changes, the component responds by rerendering
...
setState({ message: 'Hello World' })
Note: You can directly assign to the state object either in constructor or
using latest javascript’s class field declaration syntax
...

What is the purpose of callback function as an argument of
setState()?
The callback function is invoked when setState finished and the component
gets rendered
...

Note: It is recommended to use lifecycle method rather than this callback
function
...
log('The name has updated and component re-ren
� Back to Top
13
...
In HTML, the event name usually represents in lowercase as a convention:

Whereas in React it follows camelCase convention:
jsx harmony



2
...
log("The link was clicked
...
preventDefault()
console
...
')
}
3
...
(refer
“activateLasers” function in the first point for example)
� Back to Top
14
...
Binding in Constructor: In JavaScript classes, the methods are
not bound by default
...
Normally we bind them in constructor
...
handleClick = this
...
bind(this);
}
handleClick() {
console
...
handleClick}>Click Me;
}
}
2
...

jsx harmony
is:', this)

handleClick = () => {
}

console
...
handleClick}>
me'}

{'Click

3
...

jsx harmony handleClick() {
console
...
handleClick()}>Click Me; }
Note: If the callback is passed as prop to child components, those components might do an extra re-rendering
...
bind() or public class fields syntax approach considering performance
...

How to pass a parameter to an event handler or callback?
You can use an arrow function to wrap around an event handler and pass
parameters:

17

jsx harmony this
...
bind:
jsx harmony ...
bind(this,
id)} /> Apart from these two approaches, you can also pass arguments
to a function which is defined as arrow function jsx harmony onClick={this
...
log("Hello, your ticket number is", id) };
� Back to Top
16
...
Its API is same as the browser’s native event, including
stopPropagation() and preventDefault(), except the events work identically across all browsers
...

What are inline conditional expressions?
You can use either if statements or ternary expressions which are available
from JS to conditionally render expressions
...

jsx harmony

Hello!

{
!isLogin?

unread messages
...


messages
...
length}
:

You

}

� Back to Top
18
...
Key prop helps React identify which items have changed, are
added, or are removed
...
map((todo) =>
key={todo
...
text}
)
18


When you don’t have stable IDs for rendered items, you may use the item
index as a key as a last resort:
jsx harmony const todoItems = todos
...
text}
)
Note:
1
...
This can negatively impact performance and may cause
issues with component state
...
If you extract list item as separate component then apply keys on list
component instead of li tag
...
There will be a warning message in the console if the key prop is not
present on list items
...

What is the use of refs?
The ref is used to return a reference to the element
...

� Back to Top
20
...
This is a recently added approach
...
createRef() method and attached to React elements via the
ref attribute
...

jsx harmony class MyComponent extends React
...
myRef
= React
...
myRef} />
} }
2
...

For example, the search bar component’s input element is accessed as
follows, jsx harmony
class SearchBar extends Component
{
constructor(props) {
super(props);
this
...
state = { term: ''
};
this
...
txtSearch
= e;
}
}
onInputChange(event) {

19

this
...
txtSearch
...
onInputChange
...
state
ref={this
...
Note: You
can also use inline ref callbacks even though it is not a recommended
approach
...

What are forward refs?
Ref forwarding is a feature that lets some components take a ref they
receive, and pass it further down to a child
...
forwardRef((props, ref) =>
( {props
...
createRef(); {‘Forward Ref’} “‘
� Back to Top
22
...
Because
findDOMNode() prevents certain improvements in React in the future
...
scrollIntoView()
}
render() {
return

}
}
The recommended approach is:
class MyComponent extends Component {
constructor(props){
super(props);
this
...
node
...
scrollIntoView();
}
render() {
return

...

Why are String Refs legacy?
If you worked with React before, you might be familiar with an older
API where the ref attribute is a string, like ref={'textInput'}, and the
DOM node is accessed as this
...
textInput
...
String
refs were removed in React v16
...
They force React to keep track of currently executing component
...

2
...
Callback refs are perfectly
composable
...
They don’t work with static analysis like Flow
...
refs, as well as its type (which could be different)
...

4
...
g
...
Ref
will get attached to DataTable rather than MyComponent: return
;
// This would work though! Callback refs are awesome
...


21

What is Virtual DOM?
The Virtual DOM (VDOM) is an in-memory representation of Real DOM
...
It’s a step that happens between the render function being called
and the displaying of elements on the screen
...

� Back to Top
25
...

its arguments changes
� Back to Top
183
...
Redux Form can be used with raw
HTML5 inputs, but it also works very well with common UI frameworks
like Material UI, React Widgets and React Bootstrap
...

What are the main features of Redux Form?
Some of the main features of Redux Form are:
1
...

2
...

3
...

� Back to Top
185
...


91

For example, you can add redux-thunk and logger passing them as arguments to applyMiddleware():
import { createStore, applyMiddleware } from 'redux'
const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore)
� Back to Top
186
...

How Relay is different from Redux?
Relay is similar to Redux in that they both use a single store
...
Relay caches the data for you and
optimizes data fetching for you, by fetching only changed data and nothing
more
...

What is an action in Redux?
Actions are plain JavaScript objects or payloads of information that send
data from your application to your store
...
Actions must have a type property that indicates
the type of action being performed
...

What is the difference between React Native and React?
React is a JavaScript library, supporting both front end web and being
run on the server, for building user interfaces and web applications
...

� Back to Top
189
...

You can run the app in your mobile using expo app (https://expo
...

� Back to Top
190
...
log, console
...
As of React Native v0
...


93

How to debug your React Native?
Follow the below steps to debug React Native app:
1
...

2
...

3
...

4
...

5
...


React supported libraries & Integration
� Back to Top
192
...
It was originally written to compute derived data from Redux-like
applications state, but it can’t be tied to any architecture or library
...
If the the same
inputs are provided twice in a row, Reselect returns the cached output
...

� Back to Top
193
...

Flow types can express much more fine-grained distinctions than traditional type systems
...

� Back to Top
194
...


94

PropTypes is a basic type checker (runtime checker) which has been
patched onto React
...
If you want more flexible
typechecking for your entire project Flow/TypeScript are appropriate
choices
...

How to use Font Awesome icons in React?
The below steps followed to include Font Awesome in React:
1
...
Import font-awesome in your index
...
min
...
Add Font Awesome classes in className:
render() {
return

}
� Back to Top
196
...
It exists both as a browser extension (for
Chrome and Firefox), and as a standalone app (works with other environments including Safari, IE, and React Native)
...

1
...
Firefox extension
3
...

Why is DevTools not loading in Chrome for local files?
If you opened a local HTML file in your browser (file://
...

95

� Back to Top
198
...
Create a Polymer element:
jsx harmony /> Polymer({
is: 'calender-element',
ready:
function() {
this
...
Create the Polymer component HTML tag by importing it in a
HTML document, e
...
import it in the index
...
/src/polymer-components/calender-element
...
Use that element in the JSX file:
import React from 'react'
class MyComponent extends React
...

What are the advantages of React over Vue
...
js:
1
...

3
...


Gives more flexibility in large apps developing
...

Suitable for mobile apps creating
...


Note: The above list of advantages are purely opinionated and it vary based
on the professional experience
...

� Back to Top

96

200
...

React

Angular

React is a library and has only
the View layer
React handles rendering on
the server side

Angular is a framework and has complete
MVC functionality
AngularJS renders only on the client side
but Angular 2 and above renders on the
server side
Angular follows the template approach for
HTML, which makes code shorter and easy
to understand
Ionic, Angular’s mobile native app is
relatively less stable and slower

React uses JSX that looks like
HTML in JS which can be
confusing
React Native, which is a React
type to build mobile
applications are faster and
more stable
In React, data flows only in
one way and hence debugging
is easy

In Angular, data flows both way i
...
But they are helpful as base parameters
...

Why React tab is not showing up in DevTools?
When the page loads, React DevTools sets a global named __REACT_DEVTOOLS_GLOBAL_HOOK__,
then React communicates with that hook during initialization
...

� Back to Top
202
...

It removes the mapping between styles and components, and lets you write
actual CSS augmented with JavaScript
...

Give an example of Styled Components?
Lets create